<template>
  <!--开票审请-->
  <BasicModal title="特殊开票" :width="900" :heigth="280"
              :canFullscreen="false" :centered="true" :destroyOnClose="true" :bodyStyle="{overflowY:'hidden'}"
              @register="registerModal" @ok="handleSubmit"
  >
    <a-row type="flex" :gutter="5" style="margin: 0; padding: 0">
      <a-col flex="250px" style="border: 1px #ddd solid; padding-top: 5px">
        <CustomerTree @onClick="onClick"/>
      </a-col>
      <a-col flex="620px" style="border: 1px #ddd solid; padding-top: 5px;">
        <a-form ref="registerForm" :model="model" :rules="validatorRules" :labelCol="{ style: { width: '100px' } }" :wrapperCol="{ span: 16 }">
          <a-row :gutter="8" >
            <a-col :span="11">
              <a-form-item label="申请部门" name="ddlx" :labelCol="{ style: { width: '100px' } }" :wrapperCol="{ span: 16 }">
                <JDictSelectTag
                  v-model:value="model.ddlx"
                  dictCode="ddlxType@ddlxUser"
                  placeholder=" "
                  :maxTagCount="0"
                  :getPopupContainer="(node) => node.parentNode"
                  :dropdownStyle="{ width: '120px', overflow: 'auto' }"
                  :dropdownMatchSelectWidth="false"
                />
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item label="开票单位" name="taxCompanyName" :labelCol="{ style: { width: '100px' } }" v-if="userStore.getTenant == 1">
                <JDictSelectTag
                  v-model:value="model.taxCompanyName"
                  dictCode="taxCompanyName"
                  placeholder="全部"
                  :maxTagCount="0"
                  :getPopupContainer="(node) => node.parentNode"
                  :dropdownStyle="{ width: '120px', overflow: 'auto' }"
                  :dropdownMatchSelectWidth="false"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="8" >
            <a-col :span="11">
              <a-form-item label="申请金额" name="sqje" :labelCol="{ style: { width: '100px' } }" >
                <a-input v-model:value="model.sqje" placeholder="请输入申请金额" autocomplete="off"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item label="归属日期" name="invoiceDate" :labelCol="{ style: { width: '100px' } }" >
                <a-month-picker
                  v-model:value="model.invoiceDate"
                  valueFormat="YYYY-MM"
                  placeholder=""
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="8" >
            <a-col :span="24">
              <a-form-item label="收款单位" name="dwmc" >
                <a-input v-model:value="model.dwmc" placeholder="请选择左边的采购单位名称" autocomplete="off" :disabled="true"></a-input>
                <a-input type="hidden" v-model:value="model.customerId"/>
                <a-input type="hidden" v-model:value="model.sflx"/>
                <a-input type="hidden" v-model:value="model.id"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="8" >
            <a-col :span="24">
              <a-form-item label="公司名称" name="invoiceCompanyName" >
                <!--  JSelectInput v-model:value="model.invoiceCompanyId" placeholder="请选择开票公司信息" :options="invoiceCompanyOptions" @change=""></JSelectInput-->
                <!-- AutoComplete
                  v-model:value="model.value"
                  :placeholder="placeholder"
                  :options="options"
                  @select="onSelect"
                  @search="onSearch"
                  optionLabelProp="name"
                >
                </AutoComplete-->
                <a-input v-model:value="model.invoiceCompanyName" autocomplete="off"/>
                <a-input type="hidden" v-model:value="model.invoiceCompanyId"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="8" >
            <a-col :span="11">
              <a-form-item label="交接人" name="lxr">
                <a-input type="text" autocomplete="off" v-model:value="model.lxr" />
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item label="纳税人号" name="number" >
                <a-input type="text" autocomplete="off" v-model:value="model.number" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="8" >
            <a-col :span="11">
              <a-form-item label="电话" >
                <a-input type="text" autocomplete="off" v-model:value="model.lxdh"/>
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item label="地址" >
                <a-input type="text" autocomplete="off" v-model:value="model.address"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="8" >
            <a-col :span="11">
              <a-form-item label="邮箱"  >
                <a-input type="text" v-model:value="model.other" />
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item label="开户行" >
                <a-input type="text" id="lxdh" name="lxdh" v-model:value="model.bankname"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="8" >
            <a-col :span="11">
              <a-form-item label="备注" >
                <a-input type="text"  id="comments" name="comments" v-model:value="model.comments"/>
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item label="开户账号" >
                <a-input type="text" id="other" name="other" v-model:value="model.bankno"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
    </a-row>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive, watch } from "vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import { invoiceOrderSaveTsbill, invoiceCompanyInfo } from "../types/invoice.api";
import { useMessage } from "/@/hooks/web/useMessage";
import { ValidateErrorEntity } from "ant-design-vue/es/form/interface";
import { useUserStore } from '/@/store/modules/user';
import { AutoComplete } from 'ant-design-vue';
import CustomerTree from "/@/views/full/customer/components/CustomerTree.vue";
import JSelectInput from "/@/components/Form/src/jeecg/components/JSelectInput.vue";
import JDictSelectTag from "/@/components/Form/src/jeecg/components/JDictSelectTag.vue";
import dayjs from "dayjs";

const userStore = useUserStore();

const isUpdate = ref(true);
const $message = useMessage();
const emit = defineEmits(['success', 'register']);

//表单初始-----model------------------------------------------------
let model = reactive<any>({})
const registerForm = ref();

const validatorRules = {
  dwmc: [{ required: true, message: "不能为空!" }],
  ddlx: [{ required: true, message: "不能为空!" }],
  sqje: [
    { required: true, message: "不能为空!" },
    { pattern:/^-?[1-9]+(\.\d+)?$|^-?0(\.\d+)?$|^-?[1-9]+[0-9]*(\.\d+)?$/, message: '输入的金额格式有误' },
  ],
  taxCompanyName: [{ required: true, message: "不能为空!" }],
  invoiceCompanyName: [{ required: true, message: "不能为空!" }],
  number: [{ required: true, message: "不能为空!" }],
  invoiceDate: [{ required: true, message: "不能为空!" }],
  lxr: [{ required: true, message: "不能为空!" }],
};

//表单赋值
const [registerModal, { closeModal }] = useModalInner(async (data) => {
  await clearModelInfo()
  await clearCompanyInfo()
  await registerForm.value.clearValidate();
  //Object.assign(model, {});
  model.sflx = '1'; //收款开票
  model.invoiceDate = dayjs(new Date()).format('YYYY-MM')

});

//表单初始------model-----------------------------------------------

/**
 * 树节点点击事件
 * 当点城市 type = 0, 加1后 customer.type = 1 公司
 * @param treeNode
 * @returns {boolean}
 */
function onClick(treeNode) {
  // 点选节点属性
  var typeVal = (Number(treeNode.type) + 1);
  // 上面有加1
  clearCompanyInfo();
  registerForm.value.clearValidate();
  if ( typeVal == 2 ) {
    model.customerId = treeNode.id ;
    model.dwmc = treeNode.pathName;
    setCompanyInfo();
  } else {
    // model.customerId = "";
    // model.dwmc = "";
  }
}

/**公司开票信息*/
function setCompanyInfo() {
  const params = { customerId: model.customerId }
  invoiceCompanyInfo(params).then((res) => {
    if (!res || res.length <= 0) {
      //$message(res.message);
      return false;
    }

    //Object.assign(options, res.result || []);
    options.value = res.map((item, index) => ({
      id: item.id,
      value: (index + 1) + " " + item.name,
      name: item.name,
      number: item.number,
      address: item.address,
      bankno: item.bankno,
      bankname: item.bankname,
      customerId: item.customerId,
      other: item.other
    }));
    placeholder.value = "已有对应 " + res.length + " 公司信息.."

  })
}

//清空开票公司信息
function clearCompanyInfo(){
  model.invoiceCompanyId       = '';
  model.invoiceCompanyName     = '';
  model.value    = ''
  model.number   = '';
  model.address  = '';
  model.bankname = '';
  model.bankno   = '';

  options.value = []
  placeholder.value = "";
}

//清空申请单信息
function clearModelInfo(){
  model.ddlx     = ''
  model.sqje     = ''
  model.lxr      = '';
  model.lxdh     = '';
  model.other    = '';
  model.comments = '';
  model.dwmc = ''
  model.customerId = ''
}


let placeholder = ref<String>("");
const value = ref('');
const options = ref<[]>([]);

const onSearch = (text: string) => {
  // if (text) {
  //   //Object.assign(this.schepost, {value: val})
  //   model.value = text;
  //   model.invoiceCompanyName = text;
  // } else {
  //   //Object.assign(this.schepost, {id:'', value:''})
  //   model.value = "";
  //   model.invoiceCompanyName = "";
  // }
  // model.invoiceCompanyId = "";
  // model.number = "";
  // model.address = "";
  // model.bankname = "";
  // model.bankno = "";
};

const onSelect = (value, option) => {
  //console.log('onSelect', value, option);
  // model.invoiceCompanyId = option.id;
  // model.invoiceCompanyName = option.name;
  // model.value = option.name;
  // model.number = option.number;
  // model.address = option.address;
  // model.bankname = option.bankname;
  // model.bankno = option.bankno;

  // registerForm.value.clearValidate();
};

//表单提交事件
async function handleSubmit() {
  registerForm.value.validate().then(async () => {
    try {
      await invoiceOrderSaveTsbill(model).then((res) => {
        if (res.success) {
          $message.createMessage.success("操作成功！");
          //关闭弹窗
          closeModal();
          emit("success")
        } else {
          $message.createMessage.warning(res.message);
        }
      });
    } finally {
    }
  }).catch((error: ValidateErrorEntity<any>) => {
    console.log("error", error);
  });
}


</script>

<style lang="less" scoped>
.formtable .inputxt {
  border: 1px solid #D7D7D7;
  border-radius: 3PX;
  padding: 7px 0 7px 5px;
  line-height: 14PX;
  font-size: 12px;
  display: inline-block;
  width: 200px;
}

.formtable .input_text:focus {
  border: 1px solid #06F;
  box-shadow: inset 0 1px 2px rgba(0, 102, 255, 0.3);
}

.formtable select {
  padding: 6px 2px;
  width: 155px;
}
.Validform_label {
  font-size: 12px;
  padding: 5px;
  white-space: nowrap;
}
.formtable {
  width: 100%;
  background-color: #ddd;
  align: right;
}
.formtable tr {
  background-color: #FAFAFA;
  align: right;
}
</style>
